<template>
	<div id="qrcode" :style="FieldItem?.attrs.style.css"></div>
</template>

<script setup lang="ts">
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { calcFieldValue } from '/@/components/Linxyun/custom/CustomCommon/lxy_expression.js';
import QRCode from 'qrcodejs2-fixes';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem } = toRefs(props);

onMounted(() => {
	init();
});

const init = () => {
	let qrcodeDiv = document.getElementById('qrcode');
	// 对数据进行计算处理
	FieldItem.value!.attrs.text = calcFieldValue(4, FieldItem.value!.attrs.text, props.inputData, props.pageData, props.globalData);

	new QRCode(qrcodeDiv, {
		text: FieldItem.value?.attrs.text + '', // 用于生成二维码的文本
		width: FieldItem.value?.attrs.width, // 高度
		height: FieldItem.value?.attrs.height, // 宽度
		colorDark: FieldItem.value?.attrs.QRCodeColor, //前景色
		colorLight: '#ffffff', //后景色
	});
};
defineExpose({ init });
</script>

<style lang="scss" scoped></style>
